<template>
    <view class="post-content">
        <view class="post-media" :style="{ height: currentHeight + 'rpx' }">
            <!-- 张数指示器  -->
            <view class="pagination" v-if="swiperList.length > 1">
                {{ currentIndex + 1 }}/{{ swiperList.length }}
            </view>

            <!-- 轮播图 -->
            <swiper
                :current="currentIndex"
                @change="onSwiperChange"
                :style="{ height: currentHeight + 'rpx' }"
                class="swiper"
            >
                <swiper-item
                    v-for="(item, index) in swiperList"
                    :key="index"
                    class="swiper-item"
                >
                    <image
                        :src="item.image"
                        mode="widthFix"
                        @load="(e) => handleImageLoad(e, item)"
                        @error="handleImageError"
                        class="swiper-image"
                    />
                </swiper-item>
            </swiper>
        </view>

        <view class="post-info">
            <text class="info-title">{{ postData.title }}</text>

            <text class="info-content">{{ postData.content }}</text>

            <!-- 话题 -->
            <view class="info-topic">
                <text class="topic-list"> # {{ topics }}</text>
            </view>

            <view class="info-location" v-if="postData?.location">
                <han-icon name="location" size="28" />
                <text class="location-title">{{ postData.location }}</text>
                <text class="location-hint">查看地址</text>
                <han-icon name="advance" size="24" />
            </view>

            <text class="info-time"
                >发布于 {{ formatTime(postData.createTime) }}</text
            >
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { CATEGORY_BY_ID } from '@/util/config/post.config.js';
import { formatTime } from '@/util/dateUtil';

let swiperList = ref([]);

// 获取父元素数据
const props = defineProps({
    postData: {
        type: Object,
        required: true
    }
});

const postData = props.postData;
const currentHeight = ref(400);
const currentIndex = ref(0);
let screenWidth = 375;

// 获取话题
const topics = computed(() => {
    if (!postData.categoryId) return ['暂时没有分类'];

    // 在分类翻译配置中查找匹配的话题
    return CATEGORY_BY_ID[postData.categoryId] || '暂时没有分类';
});

// 初始化轮播图数据
swiperList.value = postData.imageUrls.map((item) => ({
    image: item
}));

onMounted(() => {
    const systemInfo = uni.getSystemInfoSync();
    screenWidth = systemInfo.windowWidth;
}) || [];

const handleImageLoad = (e, item) => {
    const { width, height } = e.detail;
    if (width === 0 || height === 0) return;

    // 计算并存储每张图片的高度
    const rpxHeight = (height / width) * 750;
    item.height = Math.max(350, Math.min(1000, rpxHeight));

    // 如果是当前显示的图片立即更新高度
    if (swiperList.value[currentIndex.value] === item) {
        currentHeight.value = item.height;
    }
};

const onSwiperChange = (e) => {
    currentIndex.value = e.detail.current;
    // 切换时更新为当前图片存储的高度
    currentHeight.value = swiperList.value[currentIndex.value].height;
};

const handleImageError = (e) => {
    console.error('图片加载失败:', e);
    uni.showToast({ title: '图片加载失败', icon: 'none' });
};
</script>

<style lang="scss">
.post-content {
    border-bottom: 1rpx solid $han-global-border-color;

    .post-media {
        position: relative;
        width: 100%;
        min-height: 400rpx;
        max-height: 1000rpx;

        .pagination {
            position: absolute;
            right: 20rpx;
            top: 20rpx;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 8rpx 16rpx;
            border-radius: $han-border-radius-md;
            font-size: $han-font-size-sm;
            z-index: 999;
        }

        .swiper {
            width: 100%;
            height: 100%;

            .swiper-item {
                width: 100% !important;
                height: 100% !important;
                display: flex; // 新增布局方式
                justify-content: center;

                .swiper-image {
                    width: 100%;
                    height: auto; /* 保持自动高度 */
                    object-fit: contain; /* 完整显示图片 */
                }
            }
        }
    }

    .post-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20rpx;

        .info-title {
            font-size: $han-font-size-xl;
            font-weight: 600;
            line-height: $han-line-height-title;
            margin-bottom: 10rpx;
        }

        .info-content {
            font-size: $han-font-size-base;
            line-height: $han-line-height-base;
            margin-bottom: 10rpx;
        }

        .info-location {
            width: 100%;
            height: 60rpx;
            border: 1rpx solid $han-global-border-color;
            border-radius: $han-border-radius-md;
            display: flex;
            align-items: center;
            line-height: $han-line-height-base;
            padding: 0 20rpx;
            margin-bottom: 10rpx;

            .location-title {
                margin-left: 10rpx;
                font-size: $han-font-size-base;
                color: $han-global-primary-font-color;
            }

            .location-hint {
                margin-left: auto;
                font-size: $han-font-size-xs;
                color: $han-global-secondary-font-color;
                margin-right: 10rpx;
            }
        }

        .info-time {
            font-size: $han-font-size-xs;
            color: $han-global-secondary-font-color;
        }
    }
}
</style>
